<template>
	<view>
		 <uni-segmented-control :current="current" :values="items" 
			@clickItem="onClickItem" styleType="text" activeColor="#ffd100">
		</uni-segmented-control>
		 <view style="padding: 20rpx;">
			<view class="box" v-for="(item, index) in ordersList" :key="item.id" :style="{ borderBottom: index < ordersList.length - 1 ? '1px solid #939393' : 'none' }">
				<!-- 订单详情部分 -->
				<view style="display: flex; align-items: baseline; margin-bottom: 10rpx;">
					<navigator :url="'/pages/detail/detail?businessId=' + item.businessId"
						style="flex: 1; font-size: 32rpx;">{{ item.businessName }}  
					</navigator>
					<view style="font-size: 24rpx; color: #666;">{{ item.status }}</view>
				</view>
				<!-- 商品详情 -->
				<view style="font-size: 28rpx; color: #333; margin-bottom: 10rpx;">{{ item.name }}</view>

				<!-- 订单详情 -->
				<view style="background-color: #f7f7f7; padding: 20rpx; border-radius: 10rpx; margin-bottom: 20rpx;">
					<view style="color: #000000; margin-top: 10rpx;">订单编号：{{ item.orderNo }}</view>
					<view style="color: #000000; margin-top: 10rpx;">下单时间：{{ item.time }}</view>
					<view style="color: #000000; margin-top: 10rpx;">备注：{{ item.comment }}</view>
				</view>

				<!-- 商家信息 -->
				<view style="background-color: #f7f7f7; padding: 20rpx; border-radius: 10rpx; margin-bottom: 20rpx;">
					<view style="color: #000000; margin-top: 10rpx;">商家地址：{{ item.businessAddress }}</view>
					<view style="color: #000000; margin-top: 10rpx;">商家电话：{{ item.businessPhone }}</view>
				</view>

				<!-- 用户信息 -->
				<view style="background-color: #f7f7f7; padding: 20rpx; border-radius: 10rpx; margin-bottom: 20rpx;">
					<view style="color: #000000; margin-top: 10rpx;">用户地址：{{ item.address }}</view>
					<view style="color: #000000; margin-top: 10rpx;">用户电话：{{ item.phone }}</view>
				</view>
				
				<!-- 操作按钮 -->
				<view style="display: flex; min-height: 40rpx;">
					 <view style="flex: 1; text-align: right;">
							<uni-tag v-if="item.status === '待送达'" text="完成" size="normal" type="warning" 
								@click="changeStatus(item, '待收货')"
                                custom-style="color: #000; font-size: 32rpx; padding: 10rpx;"></uni-tag>
					 </view>
				</view>
			</view>
		</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				items: ['进行中', '待收货','已完成','全部'],
				ordersList: [],
				user: uni.getStorageSync('xm-user')
			}
		},
		onShow() {
			this.loadOrders()
		},
		methods: {
			changeStatus(orders, status) {
				let form = JSON.parse(JSON.stringify(orders))
				form.status = status
				this.$request.put('/orders/update', form).then(res => {
					if (res.code === '200') {
					  uni.showToast({
					    icon: "success",
					    title: '操作成功'
					  })
					  this.loadOrders()
					} else {
					  uni.showToast({
					    icon: "error",
					    title: res.msg
					  })
					}
				})
			},
			loadOrders() {
				let status = '进行中'
				switch(this.current) {
					case 0: status = '进行中'; break
					case 1: status = '待收货'; break
					case 2: status = '已完成'; break
					case 3: status = '全部'; break
				}
				this.$request.get('/orders/selectAllRider', { riderId: this.user.id, status: status }).then(res => {
					this.ordersList = res.data || []
				})
			},
			onClickItem(e) {
			  if (this.current != e.currentIndex) {
				this.current = e.currentIndex;
				this.loadOrders()
			  }
			}
		}
	}
</script>

<style scoped>
.box {
    background-color: #fff;
    margin-bottom: 10rpx;
    padding: 20rpx;
    border-radius: 10rpx;
}

/* 添加底部边框 */
.box:not(:last-child) {
    border-bottom: 1px solid #e5e5e5;
}
</style>